<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getAllAssignmentsApi } from '@/api/order.js'; // 假设后端接口已定义

// 表格数据
const assignmentData = ref([]);

const typeLabelMap = {
    PAINTER: '漆工',
    WELDER: '焊工',
    MECHANIC: '机修',
    ELECTRICIAN: '电工'
};

// 加载数据
const fetchAssignmentData = async () => {
    try {
        const res = await getAllAssignmentsApi();
        // 只保留已完成的assignment
        assignmentData.value = res.data
            .filter(item => item.status === 'COMPLETED')
            .map(item => ({
                ...item,
                task_type: typeLabelMap[item.task_type] || item.task_type // 转换工种
            }));
    } catch (error) {
        ElMessage.error('工时费记录加载失败');
    }
};

// 页面加载时获取数据
onMounted(() => {
    fetchAssignmentData();
});

const goBack = () => {
    // 使用路由返回到上一个页面
    if (window.history.length > 1) {
        window.history.back();
    } else {
        // 如果没有历史记录，跳转到主页或其他默认页面
        window.location.href = '/';
    }
};
</script>

<template>
<el-container>
    <el-header class="header">
        <h1>工时费发放记录</h1>
        <el-button type="danger" size="small" @click="goBack">返回</el-button>
    </el-header>
    <el-main>
        <el-table :data="assignmentData" border stripe>
            <el-table-column prop="assignment_id" label="分配ID" width="100" />
            <el-table-column prop="order_id" label="订单ID" width="100" />
            <el-table-column prop="repair_person_id" label="维修人员ID" width="120" />
            <el-table-column prop="task_type" label="工种" />
            <el-table-column prop="hours_worked" label="工时" width="80" />
            <el-table-column prop="start_time" label="开始时间" width="180">
                <template #default="{ row }">
                    {{ new Date(row.start_time).toLocaleString() }}
                </template>
            </el-table-column>
            <el-table-column prop="end_time" label="结束时间" width="180">
                <template #default="{ row }">
                    {{ new Date(row.end_time).toLocaleString() }}
                </template>
            </el-table-column>
            <el-table-column prop="score" label="评分" width="80" />
            <el-table-column prop="time_cost" label="工时费" width="100" />
        </el-table>
    </el-main>
</el-container>
</template>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
</style>